/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:14:30
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-09 17:14:04
 * @FilePath: \Webgl-basic\src\7.单缓冲区实现渐变三角形.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
} from '../lib/index'
const canvas = document.querySelector('canvas')
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/ `
          // 指定浮点数精度为中等精度  
          precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
          attribute vec4 a_Position;
          //缓冲区是从attribute中取值的
          attribute vec4 a_Color;
          //varying 变量负责将顶点着色器中的数据传到片元中
          varying vec4 v_Color;
          //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
          void main(){
            //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
            gl_Position=a_Position;
            v_Color = a_Color;
          }`
//片元着色器
const fs_shader = /*glsl*/ `
        precision mediump float;
        varying vec4 v_Color;
        void main(){
            //gl_FragColor是最后输出的像素颜色,是一个四维的数据
            gl_FragColor = v_Color;            
        }`
//编译着色器,生成程序对象   操作手，专门负责javaScript和shader着色器的通讯
const program = initShader(gl, vs_shader, fs_shader)
gl.program = program
let points = new Float32Array([
    0.0, 0.5, 1.0, 0.0, 0.0, 1.0,
    -0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
    0.5, -0.5, 0.0, 0.0, 1.0, 1.0,
])
const a_Position = gl.getAttribLocation(program, 'a_Position')
const a_Color = gl.getAttribLocation(program, 'a_Color')
// gl.clear(gl.COLOR_BUFFER_BIT)
//创建缓冲区
const buffer = gl.createBuffer()
//给定缓冲区的用途
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
//向ARRY_BUFFER中写入数据
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
//指定gpu如何去缓冲区中取值
//target,大小,数据类型,是否归一化,步长,偏移值
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 4 * 6, 4 * 2);
gl.enableVertexAttribArray(a_Position)
gl.enableVertexAttribArray(a_Color)
//执行绘制
gl.drawArrays(gl.TRIANGLES, 0, 3) 
